<template>
	<view class="content" style="background-image: url('https://hyxs.ychlkj.cn/uploads/20240111/c45b96f02f894944935445fb470c5a74.png');background-size: 100% auto;
    background-repeat: no-repeat;">

<!--    <view>-->
<!--      <img style="width: 100%" src="https://hyxs.ychlkj.cn/uploads/20240111/c45b96f02f894944935445fb470c5a74.png">-->
<!--    </view>-->

    <view style="width: 100%;padding-top: 32px;padding-left: 20px">
      <view class="top-search" @click="toSearch()">
        <img alt="" style="width: 20px;height: 20px;margin-right: 10px" src="https://hyxs.ychlkj.cn/uploads/20240110/5c6ee4ed371fc70d76f80dd99f50eab7.png">
        <test class="text">搜索您喜欢的书籍</test>
      </view>
    </view>

		<view class="contentTop">
			<!-- <uni-search></uni-search> -->
			<view class="tabsSwiper" style="">
				<view class="" style="display: flex; align-items: center;">
					<view class="text" :class="{'tabText' : datalike == 1}" @click="classift(1)">
						男生
					</view>
					<view class="text" :class="{'tabText' : datalike == 2}" @click="classift(2)">
						女生
					</view>
          <view class="text" :class="{'tabText' : datalike == 3}" @click="classift(3)">
            签约作者
          </view>
				</view>

<!--				<view @click="tosousuo">-->
<!--					<image style="width: 50rpx; height: 50rpx; margin-right: 30rpx;" src="../../static/sou.png"></image>-->
<!--				</view>-->
			</view>
		</view>

		<view ref="ovscroll" id="ovscroll" class="swiperPage ovscroll">
			<view class="recommend">
				<view class="banner">
					<swiper style="width: 100%;height: 195px" class="swiper"
                  previous-margin="100px"
                  next-margin="100px"
                  active-class="swiper-active"
                  circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						      :interval="interval" :duration="duration">
						<swiper-item style="text-align: center;width: 100%;padding-left: 12%;padding-right: 12%"  v-for="(bannerImg , index) in bannerList" @click="toBanner(bannerImg)">
							<img style="width: 140px;height: 190px" :src="yourBaseURL+bannerImg.images" alt="123">
						</swiper-item>
					</swiper>

				</view>
			</view>


      <!--排行榜-->
      <view style="background:#ffffff ;padding: 10px;margin: 15px;border-radius: 8px">
        <view style="display: flex;justify-content: space-between;align-items: center;padding: 5px 6px 15px 6px">
          <view style="color: #202020;font-weight: 600;font-size: 18px">排行榜</view>
          <view>
            <img class="icon"  src="https://hyxs.ychlkj.cn/uploads/20240110/4c3c5d08a4c2e6777848c530d791a564.png"></view>
        </view>

        <view style="justify-content: flex-start;margin:0 4px 10px 4px; overflow: auto; white-space: nowrap;width: 100%">
          <view style="display: flex;">
            <view class="comic" :class="index==rankingTabId?'comic-active':''" v-for="(item, index) in rankingList" :key="index" @click="clickRinkTab(item,index)">{{item.name}}</view>
<!--            <view class="comic">完本榜</view>-->
<!--            <view class="comic">口碑榜</view>-->
<!--            <view class="comic">高分榜</view>-->
          </view>
        </view>

        <view style="display: flex;justify-content: space-around;text-align: center">
          <view style="width: 100%;display: flex;flex-wrap: wrap;">

            <view style="width: 50%;display: flex;padding: 12px 0" @click="toBookDetails(item)" v-for="(item,index) in detailsList" v-if="index < 6">
              <view>
                <img class="ranking-img"  :src="yourBaseURL+item.mian_image">
              </view>
              <view style="width: 16px;text-align: center;font-size: 14px;color: #FF2519;font-weight: 600">{{ index+1 }}</view>
              <view>
                <view class="ranking-title">{{item.title}}</view>
                <view class="ranking-score">{{item.score}}分
                </view>
              </view>
            </view>

          </view>

        </view>
      </view>

      <!--热门标签-->
      <view style="background:#ffffff ;padding: 10px;margin: 15px;border-radius: 8px">
        <view style="display: flex;justify-content: space-between;align-items: center;padding: 5px 6px 15px 6px">
          <view style="color: #202020;font-weight: 600;font-size: 18px">热门标签</view>
          <view @click="toPopular()">
            <img class="icon"  src="https://hyxs.ychlkj.cn/uploads/20240110/4c3c5d08a4c2e6777848c530d791a564.png"></view>
        </view>

        <view style="justify-content: flex-start;margin:0 4px 10px 4px; overflow: auto; white-space: nowrap;width: 100%">
          <view style="display: flex;">
            <view @click="clickHotTab(item,index)" :class="index==hotTabId?'comic-active':''" class="comic " v-for="(item,index) in booksList" >{{item.name}}</view>
<!--            <view class="comic">古典历史</view>-->
<!--            <view class="comic">武侠仙侠</view>-->
<!--            <view class="comic">都市言情</view>-->
          </view>
        </view>

        <view style="display: flex;justify-content: space-around;text-align: center">

          <view @click="toBookDetails(item)" style="width: 30%" v-for="(item,index) in hotBookList" v-if="index < 3">
            <img class="label-img" alt="" :src="yourBaseURL+item.mian_image">
            <view class="label-text">{{item.title}}</view>
          </view>


        </view>
      </view>

      <view>

        <view style="font-size: 18px;font-weight: 600;color: #202020;padding: 6px 20px">猜你喜欢</view>

        <view class="recommend">
          <view style="width: 47%;margin-bottom: 12px" v-for="(item,index) in tuiList" @click="toBookDetails(item)">
            <view style="background: #fff;">
              <img class="recommend-img" :src="yourBaseURL+item.mian_image">
            </view>
            <view style="background: #fff;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px">
              <view class="recommend-title">{{item.title}}</view>
              <view class="recommend-subtitle">{{(item.jie).substr(0,36)}}</view>
            </view>
          </view>
        </view>
      </view>

		</view>
	</view>
</template>

<script>
import {
  getIndexIndex, getMyHot, getMytuiList, getPaihang
} from '@/http/api.js';

	// 搜索插件
	import uniSearch from '@/components/search/uniSearch.vue';
	// 推荐分类 推荐榜
	import ListOfRecommended from '@/components/recommend/ListOfRecommended/ListOfRecommended.vue';
	// 推荐分类 广告banner
	import bannerSwiper from '@/components/recommend/ListOfRecommended/bannerSwiper.vue';
	// 推荐分类 热门标签
	import hotLabels from '@/components/recommend/hotLabels/hotLabels.vue';
	// 推荐分类 最新上架·热门飙升
	import newArrival from '@/components/recommend/newArrival/newArrival.vue';
	// 推荐分类 猜你喜欢
	import guessYouLike from '@/components/recommend/guessYouLike/guessYouLike.vue';
	// 出版分类 排行榜
	import rankingList from '@/components/publish/rankingList/rankingList.vue';
	// 出版分类 热门标签
	import hotTags from '@/components/publish/hotTags/hotTags.vue';
	// 出版分类 广告banner
	import classiftBanner from '@/components/publish/rankingList/bannerSwiper.vue';
	// 出版分类 藏书馆·发现好书
	import findGoodBooks from '@/components/publish/findGoodBooks/findGoodBooks.vue';
	// 出版分类 上架速递
	import hitTheShelf from '@/components/publish/hitTheShelf/hitTheShelf.vue';
	// 出版分类 猜你喜欢
	import classYouLike from '@/components/publish/guessYouLike/guessYouLike.vue';
	// 最新上架 专属推荐
	import exclusive from '@/components/newArrival/exclusive/exclusive.vue';
	// 最新上架 口碑精选
	import choiceness from '@/components/newArrival/choiceness/choiceness.vue';
	// 最新上架 新晋都市
	import metropolis from '@/components/newArrival/metropolis/metropolis.vue';
	// 最新上架 新晋玄幻
	import fantasy from '@/components/newArrival/fantasy/fantasy.vue';
	// 最新上架 新晋灵异
	import spiritual from '@/components/newArrival/spiritual/spiritual.vue';
	// 最新上架 新晋历史
	import history from '@/components/newArrival/history/history.vue';
	// 最新上架 猜你喜欢
	import newYouLike from '@/components/newArrival/newYouLike/newYouLike.vue';
	export default {
		components: {
			uniSearch,
			ListOfRecommended,
			bannerSwiper,
			hotLabels,
			newArrival,
			guessYouLike,
			rankingList,
			hotTags,
			classiftBanner,
			findGoodBooks,
			hitTheShelf,
			classYouLike,
			exclusive,
			choiceness,
			metropolis,
			fantasy,
			spiritual,
			history,
			newYouLike
		},
		data() {
			return {
				classiftNbm: 1,
				bannerList: [],
				yourBaseURL: 'http://hyxs.ychlkj.cn',
				disableTouch: false, //是否禁止用户 touch 操作
				indicatorDots: false, //是否显示面板指示点
				autoplay: true, //是否自动切换
				vertical: false, //滑动方向是否为纵向
				interval: 5000, //自动切换时间间隔
				duration: 200, //滑动动画时长
				currentIndex: 0, //当前索引
				cateList: [],
				gender: 0,
				userInfo: {},
				datalike: '',
        booksList:[], //排行榜数据
        hotTabId: 0,
        hotBookList:[], //热门数据
        tuiList:[],
        rankingList:[],
        rankingTabId: 0,
        detailsList: [],
			};
		},
		onLoad() {
      this.IndexIndex()
      this.getHot() //热门推荐
      this.getRecommend()
      this.getRanking()  //排行榜
		},

		onShow() {

		},
    onPullDownRefresh() {
				this.IndexIndex()
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
    },
		methods: {


      toSearch(){

        uni.navigateTo({
          url: '/pages/search/search_news/search_news'
        })

      },

      //热门分类
      toPopular(){

        uni.switchTab({
          url: '/pages/classify/index'
        })

      },

      //获取推荐接口
      getRecommend(){

        getMytuiList().then(res =>{
          console.log('推荐接口',res)
          this.tuiList = res.data.tuiList
        })

      },

      toBookDetails(item){

        console.log(item)

        let token = uni.getStorageSync('Token')

        if (token) {
          uni.navigateTo({
            url: '/pages/books/details/details?id=' + item.id
          });
        } else {
          uni.navigateTo({
            url: '/pages/logon/logon'
          });
        }

      },

      clickHotTab(item,index){

        this.hotTabId = index
        console.log(item)

        this.hotBookList = item.books
      },

      clickRinkTab(item,index){

        this.rankingTabId = index
        console.log(item)

        this.detailsList = item.books
      },

      //获取排行榜信息
      getRanking(){

        getPaihang().then(res =>{

          console.log('排行榜',res)


          this.rankingList = res.data
          this.rankingTabId = 0
          this.detailsList = res.data[0].books

        })

      },

      //获取热门标签接口
      getHot(){

        let data = {
          'like': this.gender
        }

        getMyHot().then(res => {

          console.log('热门标签',res)

					// this.bannerList = res.data.data;

          this.booksList = res.data
          this.hotTabId = 0
          this.hotBookList = res.data[0].books
				})
      },

			// 轮播跳转
			toBanner(bannerImg){
				uni.navigateTo({
					  url: '/pages/home/home_details/home_details?id=' + bannerImg.id + '&name=' + bannerImg.title
				});
				console.log(bannerImg.id,"轮播");
			},
			// 搜索
			tosousuo() {
				uni.navigateTo({
					url: '/pages/search/search'
				});
			},
			// 排名图片
			getMedalImage(index) {
				if (index === 0) {
					return 'http://hyxs.ychlkj.cn/uploads/20231027/7efcefdb0c719fc75011c5bd599c3662.png'; // 第一名显示皇冠
				} else if (index === 1) {
					return  'http://hyxs.ychlkj.cn/uploads/20231027/87ba1364f87e24fe87f46ea171a4e5a9.png '; ; // 第二名显示金色
				} else if (index === 2) {
					return 'http://hyxs.ychlkj.cn/uploads/20231027/98d85dadcad8f59c06cc68f9707e1cc4.png'; // 第三名显示银色
				} else {
					return 'http://hyxs.ychlkj.cn/uploads/20231027/ebb0b80faef41af7e9bdb1b470c3cfca.png'; // 第三名之后不显示任何标识
				}
			},
			// 首页接口
			IndexIndex() {
				// this.userInfo = uni.getStorageSync('userInfo');
				let data = {
					// "token": this.userInfo.userinfo.token,
					"like": this.gender,
          "type":1
				}
        console.log(11)
				getIndexIndex(data).then((res) => {
          console.log('轮播图',res)
					// this.$globalState.bannerList = res.data.bannerList; // 修改全局状态
					this.bannerList = res.data.bannerList; // 修改全局状态
					this.datalike = res.data.like
					console.log(res.data.like, "首页接口123");

					this.cateList = res.data.cateList
					setTimeout(function () {
						uni.stopPullDownRefresh();
					}, 1000);
				})
			},
			classift(e) {
				this.gender = e
				this.IndexIndex()
				console.log(e, "性别");
				const that = this
				that.classiftNbm = 7
				setTimeout(function() {
					that.classiftNbm = e
				}, 100)
			},
			booksPage(e) {
				console.log(e, "[][]")
				// uni.navigateTo({
				// 	url: '../books/books?id=' + e
				// });
				uni.navigateTo({
					url: '../books/details/details?id=' + e
					// url: '../books/books1/books1?id=' + e
				});
			},
			// 排行榜
			toRanking() {
				uni.navigateTo({
					url: './the_charts/the_charts'
				});

			},
			// 完结
			toEnd() {
				uni.navigateTo({
					url: './end/end'
				});
			},
			// 查看更多
			toLORtapr(title) {
				console.log(title);
				uni.navigateTo({
					url: '/pages/home/home_details/home_details?id=' + title.id + '&name=' + title.name
				});
			},

		}
	};
</script>

<style lang="less">
	.content {
		width: 100vw;
		background-color: #f6f6f6;

		.contentTop {
			//position: fixed;
			//top: 0;
			z-index: 1000;

			.tabsSwiper {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				align-content: flex-end;
				box-sizing: border-box;
				width: 100vw;
				height: 13vw;
				padding: 8vh 0 1vh 0;
				//background-color: #f6f6f6;

				.text {
          font-size: 14px;
					color: #777777 ;
          font-weight: 500;
					padding-left: 40px;
				}

				.tabText {
          font-size: 22px;
          font-weight: 600;
					color: #333;
				}
			}
		}

		.swiperPage {
			padding-top: 5vw;
			width: 100vw;

			.recommend {
				width: 100vw;
				box-sizing: border-box;
				padding: 0 4vw;
				padding-bottom: 5vw;
			}

			.ovscroll {
				overflow-y: scroll;
			}
		}
	}

	*::-webkit-scrollbar {
		width: 0px;
		height: 0px;
		background-color: #f5f5f5;
	}

	*::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
		border-radius: 10px;
		background-color: #f5f5f5;
	}

	*::-webkit-scrollbar-thumb {
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
		background-color: #bddbff;
	}


	.project-loading {
		background: #fff;
		// width: 100%;
		// height: 100%;
		position: fixed;
		left: 0;
		// top: 35vw;
		z-index: 100000
	}

	.project-loading .loader {
		position: fixed;
		top: calc(50% - 21px);
		left: 44vw
	}

	@-webkit-keyframes line-scale-pulse-out {
		0% {
			-webkit-transform: scaley(1);
			transform: scaley(1)
		}

		50% {
			-webkit-transform: scaley(.4);
			transform: scaley(.4)
		}

		100% {
			-webkit-transform: scaley(1);
			transform: scaley(1)
		}
	}

	@keyframes line-scale-pulse-out {
		0% {
			-webkit-transform: scaley(1);
			transform: scaley(1)
		}

		50% {
			-webkit-transform: scaley(.4);
			transform: scaley(.4)
		}

		100% {
			-webkit-transform: scaley(1);
			transform: scaley(1)
		}
	}

	.line-scale-pulse-out>div {
		width: 3px;
		height: 40px;
		border-radius: 2px;
		margin: 2px;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		display: inline-block;
		-webkit-animation: line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85, .25, .37, .85);
		animation: line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85, .25, .37, .85)
	}

	.line-scale-pulse-out>div:nth-child(2),
	.line-scale-pulse-out>div:nth-child(4) {
		-webkit-animation-delay: -.4s !important;
		animation-delay: -.4s !important
	}

	.line-scale-pulse-out>div:nth-child(1),
	.line-scale-pulse-out>div:nth-child(5) {
		-webkit-animation-delay: -.2s !important;
		animation-delay: -.2s !important
	}

	.banner {
		margin-top: 3vw;
    width: 100%;

		img {
			width: 92vw;
			height: 150px;
			border-radius: 10px;
		}
	}

	.hotLabels {
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 4vw;
		margin-top: 4vw;
		border-radius: 10px;
	}

	.LORtop {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.LORtapl {
			font-size: 5vw;
			font-weight: bold;
			color: #000000;
		}

		.LORtapr {
			font-size: 4vw;
			color: #000000;
			position: relative;
			margin-right: 2vw;
		}

		.LORtapr::after {
			content: ' ';
			width: 5px;
			height: 5px;
			border-top: 2px #000000 solid;
			border-right: 2px #000000 solid;
			position: absolute;
			right: -2vw;
			top: 2vw;
			transform: rotate(45deg);

		}
	}

	.classiftCen {
		margin-top: 4vw;

		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
		}

		.scroll-view-item_H {
			display: inline-block;
			padding: 0.5vw 3vw;
			height: 8vw;
			line-height: 8vw;
			margin-right: 3vw;
			text-align: center;
			font-size: 3.8vw;
			border-radius: 4vw;
			background-color: #f0f0f0;
		}

		.scroll-view_H::-webkit-scrollbar {
			width: 0px;
			height: 0px;
			background-color: rgba(0, 0, 0, 0);
		}

		.scroll-view_H::-webkit-scrollbar-track {
			-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0);
			border-radius: 10px;
			background-color: rgba(0, 0, 0, 0);
		}

		.scroll-view_H::-webkit-scrollbar-thumb {
			border-radius: 10px;
			-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0);
			background-color: rgba(0, 0, 0, 0);
		}
	}

	.hotBook {
		display: flex;
		width: 84vw;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 2vw;

		.hotBookf {
			width: 25vw;
			margin-top: 3vw;

			.hotBookfi {
				width: 50vw;
				height: 30.2vw;

				img {
					width: 25vw;
					height: 30.2vw;
				}
			}

			.hotBookfn {
				margin-top: 2vw;
				font-size: 3.5vw;
				height: 9vw;
				color: #000000;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
		}
	}

	.one {

		line-height: 35rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

  .top-search{
    padding: 8px;
    display: flex;
    justify-content: left;
    align-items: center;
    background: rgba(255,255,255,0.7);
    box-shadow: 0px 4px 12px 4px rgba(32,32,32,0.02);
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    width: 80%;
    border: 1px solid rgba(0,0,0,0.04);
  }
  .top-search .text{
    height: 14px;
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    line-height: 14px;
  }

  .icon{
    width: 20px;
    height: 20px;
  }

  .comic-active {
    background: linear-gradient(93deg, #E66D39 0%, #E13333 100%)!important;
    color: #fff !important;
  }
  .comic{
    margin-right: 12px;
    padding: 6px 12px;
    background: #f7f7f7;
    border-radius: 4px;
    color: #a0a0a0;
    font-size: 14px;

  }

  .ranking-img{
    width: 50px;height: 70px
  }

  .ranking-score{
    padding-top: 5px;
    text-align: left;
    font-size: 13px;
    color: #AAAAAA;
  }

  .ranking-title{
    font-weight: 600;
    color: #333333;
    font-size: 16px
  }
  .label-img{
    width: 90%;
    border-radius: 4px
  }
  .label-text{
    font-weight: 500;
    color: #333333;
    font-size: 14px;
  }
  .recommend{
    width: 90%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: auto
  }
  .recommend-img{
    width: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .recommend-title{
    padding: 6px 10px;
    color: #333;
  }
  .recommend-subtitle{
    color: #AAAAAA;
    font-size: 13px;
    padding: 0 10px 15px 10px;
  }

  .swiper-active{
    img{
      width: 150px;
    }
  }
</style>
